<script lang="ts">

export default {
    name: 'Person'
}

</script>

<script lang="ts" setup>

import { reactive, ref ,toRefs} from 'vue'

let person = reactive({
    name:"张三",
    age:18
})

// let {name,age}  = person 
// 使用 toRefs这样的话 形成的name 和 age是一个响应对象


// let {name,age}  = toRefs(person)
let {name,age}  = toRefs(person) 

console.log(name,age)


function changeName(){
    name.value = "李四"
    console.log(person.name);
}
function changeAge(){
    age.value += 1
    console.log(person.age);
}
</script>

<template>
    <div class="person">
        <h1>姓名:{{person.name}}</h1>
        <h1>年龄:{{person.age}}</h1>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0px 5px;
}
</style>